<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title> 保护区巡护管理系统</title>
		<meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
		<meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- basic styles -->
		<link href="../../resources/assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../resources/assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="../../resources/assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- page specific plugin styles -->
		<!-- page specific plugin styles -->

		<link rel="stylesheet" href="../../resources/assets/css/jquery-ui-1.10.3.full.min.css" />
		<link rel="stylesheet" href="../../resources/assets/css/datepicker.css" />
		<link rel="stylesheet" href="../../resources/assets/css/ui.jqgrid.css" />

		<!-- fonts -->

		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />

		<!-- ace styles -->

		<link rel="stylesheet" href="../../resources/assets/css/ace.min.css" />
		<link rel="stylesheet" href="../../resources/assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="../../resources/assets/css/ace-skins.min.css" />

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="../../resources/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../resources/assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../resources/assets/js/html5shiv.js"></script>
		<script src="../../resources/assets/js/respond.min.js"></script>
		<![endif]-->
		
		
	<style type="text/css">
	    html
	    {    
	        margin:0;
	        overflow:hidden;
	        _padding:10px 0px 10px 0;/*IE6下通过设置上下的填充来给上下固定部分腾出空间*/
	        _border:0;      
	    }    
	     body 
	    {
	        margin:0;           
	        height:100%;
	        border:0;                
	    }   
	    #content 
	    {   
	        margin:0; /*公共*/
	        width:100%;
	        position:fixed;/*FF IE7 SF*/ 
	        top:40px;
	        bottom:10px;              
	        overflow: auto !important;
	        _position: relative;/**IE6***/        
	        _top:0px;        
	        _OVERFLOW-Y: auto; 
	        _OVERFLOW-X: auto; 
	        SCROLLBAR-FACE-COLOR: #EEEEEE;/*设置IE下滚动条颜色*/
	        SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
	        SCROLLBAR-SHADOW-COLOR: #919192;        
	        SCROLLBAR-3DLIGHT-COLOR:#ffffff;
	        SCROLLBAR-ARROW-COLOR: #919192; 
	        SCROLLBAR-TRACK-COLOR: #ffffff; 
	        SCROLLBAR-DARKSHADOW-COLOR: #ffffff;        
	        _height:100%;              
	    }   
	    #header {
	        position:absolute;/*公共*/
	        top:0;
	        left:0;
	        width:100%;
	        height:60px;    
	        border-bottom:solid 1px #AE85E1;    
	        background-color:#EFEFEF;       
	        overflow:auto !important;/*FF*/
	        _OVERFLOW-Y: auto;/*IE6*/ 
	        _OVERFLOW-X: auto; 
	        SCROLLBAR-FACE-COLOR: #EEEEEE;/*设置IE下滚动条颜色*/
	        SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
	        SCROLLBAR-SHADOW-COLOR: #919192;        
	        SCROLLBAR-3DLIGHT-COLOR:#ffffff;
	        SCROLLBAR-ARROW-COLOR: #919192; 
	        SCROLLBAR-TRACK-COLOR: #ffffff; 
	        SCROLLBAR-DARKSHADOW-COLOR: #ffffff;     
	    }
	    #footer {
	        position:absolute;/*公共*/
	        bottom:0;
	        left:0;
	        width:100%;
	        height:60px;    
	        border-top:solid 1px #AE85E1;    
	        background-color:#EFEFEF;       
	        overflow:auto !important;/*FF*/
	        _OVERFLOW-Y: auto;/*IE6*/ 
	        _OVERFLOW-X: auto; 
	        SCROLLBAR-FACE-COLOR: #EEEEEE;/*设置IE下滚动条颜色*/
	        SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
	        SCROLLBAR-SHADOW-COLOR: #919192;        
	        SCROLLBAR-3DLIGHT-COLOR:#ffffff;
	        SCROLLBAR-ARROW-COLOR: #919192; 
	        SCROLLBAR-TRACK-COLOR: #ffffff; 
	        SCROLLBAR-DARKSHADOW-COLOR: #ffffff;     
	    }
			
		</style>
	</head>
	<body  style="height: 100%">
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>
			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a href="#" class="navbar-brand">
						<small>
							<img src="../../resources/assets/images/logo.png">
						</small>
					</a><!-- /.brand -->
				</div><!-- /.navbar-header -->
			</div><!-- /.container -->
		</div>

		<div class="main-container" id="main-container" style="height: 100%">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div class="main-container-inner" style="height: 100%">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
					</script>

					<div class="sidebar-shortcuts" id="sidebar-shortcuts">
						<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
							<button class="btn btn-success">
								<i class="icon-signal"></i>
							</button>
							<button class="btn btn-info">
								<i class="icon-pencil"></i>
							</button>
							<button class="btn btn-warning">
								<i class="icon-group"></i>
							</button>
							<button class="btn btn-danger">
								<i class="icon-cogs"></i>
							</button>
						</div>
						<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
							<span class="btn btn-success"></span>

							<span class="btn btn-info"></span>

							<span class="btn btn-warning"></span>

							<span class="btn btn-danger"></span>
						</div>
					</div><!-- #sidebar-shortcuts -->
					<ul class="nav nav-list">
						<li class="active">
							<a href="current.html">
								<i class="icon-dashboard"></i>
								<span class="menu-text"> 控制台 </span>
							</a>
						</li>

						<li>
							<a href="current.html">
								<i class="icon-text-width"></i>
								<span class="menu-text"> 实时监控 </span>
							</a>
						</li>
						<li>
							<a href="history.html" class="dropdown-toggle">
								<i class="icon-desktop"></i>
								<span class="menu-text">历史记录</span>
							</a>

						</li>
						<li>
							<a href="#" class="dropdown-toggle">
								<i class="icon-list"></i>
								<span class="menu-text"> 动态分析 </span>
							</a>

						</li>
						<li>
							<a href="#" class="dropdown-toggle">
								<i class="icon-edit"></i>
								<span class="menu-text"> 系统功能 </span>
							</a>
						</li>
					</ul><!-- /.nav-list -->

					<div class="sidebar-collapse" id="sidebar-collapse">
						<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
					</div>

					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
					</script>
				</div>
			<div id="content">
				<div class="main-content" style="height: 100%">
					<div class="page-content" style="height: 100%">
						<div class="row"  style="height: 100%">
							<div class="col-xs-12" style="height: 100%">
								<div class="row">
									<div class="col-xs-12">
										<div class="widget-box">
											<div class="widget-header">
												<h5>巡护设备</h5>
											</div>
											<div class="widget-body">
												<div class="widget-main">
													<div id="patrollingdevicediv">
													</div>
												</div>
											</div>
										</div>
									</div>
								</div><!-- /row -->
								<div class="row"  style="height: 80%">
			     				 	<div class="col-xs-12 col-sm-9 widget-container-span ui-sortable"  style="height: 100%">
										<div class="widget-box"  style="height: 100%" id="mapwidgetbox">
											<div class="widget-header">
												<h5>地图展示</h5>
											</div>
											<div class="widget-body" style="height: 100%">
												<div class="widget-main"  style="height: 100%">
													<div id="map" style="height: 100%; width:100%;"></div>
												</div>
											</div>
										</div>
									</div>
									<div class="col-xs-12 col-sm-3 widget-container-span ui-sortable" >
								       <div class="widget-box">
									       	<div class="widget-header" id="widthforjqgrid">
												<h5>详细巡护记录</h5>
											</div>
											<div class="widget-content nopadding">
									       		<table id="grid-table"></table>
												<div id="grid-pager" ></div>
												<script type="text/javascript">
													var $path_base = "/";//this will be used in gritter alerts containing images
												</script>
											</div>
									</div><!-- /.col -->
			      				</div>
				    	</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content -->
		</div><!-- /.main-content -->
		
	</div>
</div><!-- /.main-container-inner -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<script type="text/javascript">
			window.jQuery || document.write("<script src='../../resources/assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
		</script>
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='../../resources/assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
		</script>
		<script src="../../resources/assets/js/bootstrap.min.js"></script>
		<script src="../../resources/assets/js/typeahead-bs2.min.js"></script>
		<script src="../../resources/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="../../resources/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="../../resources/assets/js/jquery.slimscroll.min.js"></script>
		<script src="../../resources/assets/js/jquery.easy-pie-chart.min.js"></script>
		<script src="../../resources/assets/js/jquery.sparkline.min.js"></script>
		<script src="../../resources/assets/js/flot/jquery.flot.min.js"></script>
		<script src="../../resources/assets/js/flot/jquery.flot.pie.min.js"></script>
		<script src="../../resources/assets/js/flot/jquery.flot.resize.min.js"></script>

		<script src="../../resources/assets/js/jquery.dataTables.min.js"></script>
		<script src="../../resources/assets/js/jquery.dataTables.bootstrap.js"></script>
		<script src="../../resources/assets/js/date-time/bootstrap-datepicker.min.js"></script>
		<script src="../../resources/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
		<script src="../../resources/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
		<script src="../../resources/assets/js/ace-elements.min.js"></script>
		<script src="../../resources/assets/js/ace.min.js"></script>
		
		<script src="../../resources/assets/js/bootbox.min.js"></script>
		 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript"
      src="https://www.google.com/jsapi?key=ABQIAAAA_KNcKfoyaTskjEp-kSSEjxSsDbTxMRg-JrUcPZT14QWonZA5mxRqx3ct_DbeHVelXNr1WbKEEJ5k-A"></script>
    <script type="text/javascript" src="../../resources/js/googleearth-compiled.js"></script>
    <script type="text/javascript">
			var grid_data = 
			[ 
				{device:"设备1",discoveryType:"植物",name:"金线莲"},
				{device:"设备2",discoveryType:"植物",name:"金线莲"},
				{device:"设备4",discoveryType:"植物",name:"金线莲"},
				{device:"设备1",discoveryType:"植物",name:"金线莲"},
				{device:"设备3",discoveryType:"植物",name:"金线莲"},
				{device:"设备2",discoveryType:"植物",name:"金线莲"},
				{device:"设备1",discoveryType:"植物",name:"金线莲"},
				{device:"设备2",discoveryType:"动物",name:"野猪"}
			];	
			//窗口改变大小时重新计算jqgrid宽高
			window.onresize=function(){
				$("#grid-table").jqGrid('setGridHeight',Number($("#mapwidgetbox").css("height").split('p')[0])-100).jqGrid('setGridWidth',Number($("#widthforjqgrid").css("width").split('p')[0])+11);
			};
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				var heightofmap = $("#mapwidgetbox").css("height");
				
				//alert(Number(heightofmap.split('p')[0]));
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
					
					data: grid_data,
					datatype: "local",
					height: Number(heightofmap.split('p')[0])-100,
					colNames:[' ','设备','类型','名称'],
					colModel:[
						{name:'myac',index:'', width:70, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						
						/*
						{name:'id',index:'id', width:60, sorttype:"int", editable: true},
						{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
						{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
						{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} */
						{name:'device',index:'device',width:60,editable:true},
						{name:'discoveryType',index:'discoveryType',width:60,editable:true},
						{name:'name',index:'name',width:60,editable:true}
						
					], 
			
					viewrecords : true,
					rowNum:15,
					rowList:[10,15,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
					editurl: $path_base+"/dummy.html",//nothing is saved
					//caption: "巡护详细信息",
					autowidth: true
				});
			
				//enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
			
				//switch element when editing inline
				function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
								.wrap('<label class="inline" />')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}
				//enable datepicker
				function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				}
			
			
				//navButtons
				
			
			
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
						.end().find('input[name=stock]')
							  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>');
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			
			
			});
		</script>
    
    <script type="text/javascript">
    google.load('earth', '1');
    var map;
    var googleEarth;
    
    function init() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: new google.maps.LatLng(40, 115.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      googleEarth = new GoogleEarth(map);

      //google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
      //google.maps.event.addListenerOnce(map, 'tilesloaded');
      
      /////////////
      
       var contentString = '<div >'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">巡护基本信息</h3>'+
      '<div id="bodyContent">'+
  	  '<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">'+
			'<thead>'+
				'<tr>'+
					'<th>设备编号</th>'+
					'<th>联系号码</th>'+
					'<th>巡护人员</th>'+
					'<th>开始时间</th>'+
					'<th>巡护方式</th>'+
					'<th>当前纬度</th>'+
					'<th>当前经度</th>'+
					'<th>备注</th>'+
				'</tr>'+
			'</thead>'+
			'<tbody>'+
				'<tr>'+
					'<td></td>'+
					'<td></td>'+
					'<td></td>'+
					'<td></td>'+
					'<td></td>'+
					'<td></td>'+
					'<td></td>'+
					'<td></td>'+
				'</tr>'+
			'</tbody>'+
		'</table>'+
      '</div>'+
      '</div>';
	
	  var infowindow = new google.maps.InfoWindow({
	      content: contentString
	  });
	var myLatlng = new google.maps.LatLng(40, 115.644);

	  var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      title: 'test'
	  });
	  
	  google.maps.event.addListener(marker, 'click', function() {
	    infowindow.open(map,marker);
	  });
    }

    function addInfowindow(marker, infowindow) {
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    }
    google.maps.event.addDomListener(window, 'load', init);

    //请求后台数据，看现在有几个设备在外面巡护
  $(function(){
  	$.post("/listpatroldevices.do",function(data){
  		//alert(data[0].device);
  		//var str = data.split('-');
  		var divdom = $("<div data-toggle='buttons' class='btn-group'></div>");
  		var labeldom = $("<label class='btn btn-primary'  ></label>");
  		var inputdom = $("<input type='radio' />");
  		//如果没有设备返回，则提示没有巡护设备。
  		if(data==''){
  			bootbox.dialog({
				message: "<span class='bigger-110'>没有设备在巡护当中或者尚未收到巡护设备信号！</span>",
				buttons: 			
				{
					"click" :
					{
						"label" : "确定",
						"className" : "btn-sm btn-primary",
						"callback": function() {
							//Example.show("Primary button");
						}
					}
				}
			});
  		}else{
	  		for(var i = 0;i<data.length;i++){
	  			var labeldom = $("<label class='btn btn-primary'  >"+data[i].device.replace('device','设备')+"</label>");
	  	  		var inputdom = $("<input type='radio' value='"+data[i].device+"'/>");
	  	  		labeldom.bind('click',{deviceName:data[i].device,patrol:data[i]},handler);//绑定按钮点击事件
	  	  		inputdom.appendTo(labeldom);
	  	  		labeldom.appendTo(divdom);
	  		}
  		}
  		divdom.appendTo("#patrollingdevicediv");
  	});
  });
  function handler(event) {
	  alert(event.data.deviceName);
	  var patrol = event.data.patrol;
	  alert(patrol);
	 $.post("/trackinfo.do",{device:event.data.deviceName},function(data){
		 //alert(data.lon);
		 var contentString = '<div >'+
	      '<div id="siteNotice">'+
	      '</div>'+
	      '<h3 id="firstHeading" class="firstHeading">巡护基本信息</h3>'+
	      '<div id="bodyContent">'+
	  	  '<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">'+
				'<thead>'+
					'<tr>'+
						'<th>设备编号</th>'+
						'<th>联系号码</th>'+
						'<th>巡护人员</th>'+
						'<th>开始时间</th>'+
						'<th>巡护方式</th>'+
						'<th>当前纬度</th>'+
						'<th>当前经度</th>'+
						'<th>备注</th>'+
					'</tr>'+
				'</thead>'+
				'<tbody>'+
					'<tr>'+
						'<td>'+patrol.id+'</td>'+
						'<td>'+patrol.device+'</td>'+
						'<td></td>'+
						'<td></td>'+
						'<td></td>'+
						'<td></td>'+
						'<td></td>'+
						'<td></td>'+
					'</tr>'+
				'</tbody>'+
			'</table>'+
	      '</div>'+
	      '</div>';
	      
		 var infowindow = new google.maps.InfoWindow({
		      content: contentString
		  });
		var myLatlng = new google.maps.LatLng(data.lat, data.lon);
		  var marker = new google.maps.Marker({
		      position: myLatlng,
		      map: map,
		      title: '巡护基本信息'
		  });
		  
		  google.maps.event.addListener(marker, 'click', function() {
		    infowindow.open(map,marker);
		  });
		  
	 });
	}
  </script>
  
     <script type="application/javascript"><![CDATA[
        var Chat = {};

        Chat.socket = null;

        Chat.connect = (function(host) {
            if ('WebSocket' in window) {
                Chat.socket = new WebSocket(host);
            } else if ('MozWebSocket' in window) {
                Chat.socket = new MozWebSocket(host);
            } else {
                Console.log('错误：该浏览器不支持实时传送技术，请选用FireFox浏览器最新版本。');
                return;
            }

            Chat.socket.onopen = function () {
                Console.log('Info: WebSocket connection opened.');
                document.getElementById('chat').onkeydown = function(event) {
                    if (event.keyCode == 13) {
                        Chat.sendMessage();
                    }
                };
            };

            Chat.socket.onclose = function () {
                document.getElementById('chat').onkeydown = null;
                Console.log('Info: WebSocket closed.');
            };

            Chat.socket.onmessage = function (message) {
            //Console.log(message.data);
            
	            //在此处添加代码，为传回来的值做判断，并推送至google
                var json = eval('('+message.data+')');
                
                if(json.type == 'track'){
                	//如果是track,....
                	var track = eval('('+json.data+')');
                }else if(json.type == 'patrol'){
                	//如果是patrol,....
                	var patrol = eval('('+json.data+')');
                }else{
                	//如果是find,....
                	var find = eval('('+json.data+')');
                }
            };
        });

        Chat.initialize = function() {
            if (window.location.protocol == 'http:') {
                Chat.connect('ws://' + window.location.host + '/websocket/push');
            } else {
                Chat.connect('wss://' + window.location.host + '/websocket/push');
            }
        };

        Chat.sendMessage = (function() {
            var message = document.getElementById('chat').value;
            if (message != '') {
                Chat.socket.send(message);
                document.getElementById('chat').value = '';
            }
        });

        var Console = {};

        Console.log = (function(message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.innerHTML = message;
            console.appendChild(p);
            while (console.childNodes.length > 25) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        });

        Chat.initialize();


        document.addEventListener("DOMContentLoaded", function() {
            // Remove elements with "noscript" class - <noscript> is not allowed in XHTML
            var noscripts = document.getElementsByClassName("noscript");
            for (var i = 0; i < noscripts.length; i++) {
                noscripts[i].parentNode.removeChild(noscripts[i]);
            }
        }, false);

    ]]></script>
</html>

